<template>
    <div class="Warband">
        <div class="body f-row">
            <img src="../../assets/logo.png" alt="">
            <div class="f-column f-j-around f-a-start">
                <strong class="name">Margaret Rodriguez</strong>
                <div class="vip DIN-Medium">体验会员 V3</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {NAV_BAR_INFO} from "@/store/MutationTypes";
@Component({
    name: 'Warband'
})
export default class extends Vue {
    private mounted(): void {
        let __this = this;
        this.$common.scrollToTop();
        this.$store.dispatch(NAV_BAR_INFO, {
            leftItem: {name: '返回', click: () => {
                    __this.$router.push('/user-center');
                }}
        })
    }
}
</script>

<style scoped lang="less">
.Warband {
    padding: 0.2rem 0.3rem;
    & .body {
        background-color: white;
        border-radius: 0.1rem;
        padding: 0.2rem;
        & img {
            width: 1.0rem;
            height: 1.0rem;
            border-radius: 1.0rem;
            margin-right: 0.2rem;
        }
        & .name {
            font-size: 0.3rem;
            color: black;
        }
        & .vip {
            background:linear-gradient(180deg,rgba(238,238,238,0.15) 0%,rgba(216,216,216,1) 100%);
            font-size: 0.2rem;
            color: #666666;
            border-radius: 0.5rem;
            padding: 0.04rem 0.2rem;
        }
    }
}
</style>
